<template>
	<view class="container">
		<view class="list-cell b-b m-t" @click="navTo(1)" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">个人资料</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo(2)" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">收货地址</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell b-b" @click="navTo(3)" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">修改密码</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		<view class="list-cell log-out-btn" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view>
		<u-popup :show="show" @close="close" mode="center" :round="10">
			<view class="popupDiv">
				<h4>
					{{userInfo.type==0?'设置密码':'修改密码'}}
				</h4>
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="电话" prop="phone" ref="item1" v-if="userInfo.type==1">
						<u--input v-model="userInfo.phone" border="none" placeholder="请输入手机号" disabled></u--input>
					</u-form-item>

					<u-form-item label="密码" prop="password" ref="item1">
						<u--input v-model="userInfo.password" border="none" placeholder="请输入密码"></u--input>
					</u-form-item>

					<u-form-item label="验证码" prop="code" ref="item1" labelWidth="60" v-if="userInfo.type==1">
						<div class="itemDiv">
							<u--input v-model="userInfo.code" border="none" placeholder="请输入验证码"></u--input>
							<div>
								<button @click="getCode" v-if="!isCode">获取验证码</button>
								<button v-else
									style="width: 50px;display: flex;align-items: center;justify-content: center;">
									<u-count-down :time="time" format="ss" @finish="finishData"></u-count-down>
								</button>
							</div>
						</div>
					</u-form-item>
				</u--form>
				<button class="confirm-btn" @click="confirm('uForm')" :disabled="logining">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		setPassword
	} from '@/api/userCenter.js'
	import {
		sendCode
	} from '../../api/index.js'
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				userInfo: {
					phone: '',
					password: '',
					code: '',
					label: 'modify',
					type: ''
				},
				rules: {
					'phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
				// 获取验证码
				code: '',
				isCode: false,
				time: 60 * 1000,
				regex: /^1[3-9]\d{9}$/
			};
		},
		onLoad(option) {
			if (option.passwordStatus) {
				this.userInfo.type = option.passwordStatus
				this.userInfo.phone = option.phone
			}
		},
		methods: {
			...mapMutations(['logout']),
			// 修改密码确认
			confirm(uForm) {
				let that = this
				that.$refs.uForm.validate().then((res) => {
					setPassword(that.userInfo).then(res => {
						if (res.code == 200) {
							wx.showToast({
								title: res.msg,
								icon: 'success',
								duration: 1000
							})
							this.show = false
						}
					})

				}).catch(errors => {
					console.log(errors);
				})
			},
			// 关闭
			close() {
				this.show = false
			},
			// 倒计时停止滚动
			finishData() {
				this.isCode = false
			},
			// 获取验证码
			async getCode() {
				if (this.regex.test(this.userInfo.phone)) {
					this.isCode = true
					let par = {
						label: "modify",
						phone: this.userInfo.phone
					}
					let res = await sendCode(par)
					if (res.code == 200) {
						let str = res.msg.split("：")
						this.code = str[1]
						console.log(this.code);
					}

				} else {
					wx.showToast({
						title: '请输入正确手机号',
						icon: 'error',
						duration: 2000
					})
				}

			},

			navTo(num) {
				if (num == 1) {
					// 跳转到个人资料修改
					uni.navigateTo({
						url: '/pages/personalData/personalData'
					})
				} else if (num == 2) {
					uni.navigateTo({
						url: '/pages/address/address'
					})
				} else if (num == 3) {
					this.show = true
					this.code = ''
					this.isCode = false
					this.userInfo.code=''
					this.userInfo.password=''
				}
			},
			//退出登录
			toLogout() {
				uni.showModal({
					content: '确定要退出登录么',
					success: (e) => {
						if (e.confirm) {
							this.logout();
							setTimeout(() => {
								uni.navigateBack();
							}, 200)
						}
					}
				});
			},
			//switch
			switchChange(e) {
				let statusTip = e.detail.value ? '打开' : '关闭';
				this.$api.msg(`${statusTip}消息推送`);
			},

		}
	}
</script>

<style lang='scss'>
	.popupDiv {
		padding: 20rpx;

		.confirm-btn {
			width: 630upx;
			height: 76upx;
			line-height: 76upx;
			border-radius: 50px;
			background: $uni-color-primary;
			color: #fff;
			font-size: $font-lg;

			&:after {
				border-radius: 100px;
			}
		}

		h4 {
			font-size: 40rpx;
			text-align: center;
			color: #ff7600;
			margin-bottom: 20rpx;
		}

		.u-form-item__body__right__message {
			margin-top: -40rpx;
			margin-bottom: 20rpx;
		}

		.u-form-item__body {
			display: flex;
			flex-direction: column !important;
			align-items: flex-start;
			justify-content: center;
			padding: 20rpx 30upx !important;
			background: $page-color-light;
			/* height: 120upx; */
			border-radius: 4px;
			margin-bottom: 50upx;
			border: none;

			.itemDiv {
				display: flex;
				align-items: center;
				justify-content: space-between;

				button {
					width: 180rpx;
					font-size: 12px;
					margin: 0;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	page {
		background: $page-color-base;
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}
</style>